<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="height:800px">
        <span>
          <navigation />
        </span>
        <el-button size="small" style="float: right;" type="primary" @click="addPermiss">添加</el-button>
      </div>
      <el-scrollbar class="page-component__scroll" style="height:100%">
        <div style="height:700px;">
          <el-table
            :header-cell-style="{ background: '#f5f5f5' }"
            class="perTabSty"
            :data="tableData"
            height="680px"
            style="width: 100%;margin-bottom: 20px;"
            border
          >
            <el-table-column align="center" prop="type" label="类别">
              <template slot-scope="scope">
                {{
                scope.row.type == 1 ? "负面清单" : "日常工作台账"
                }}
              </template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="扣分项"></el-table-column>
            <el-table-column align="center" prop="score" label="分数"></el-table-column>
            <el-table-column align="center" label="操作" width="180">
              <template slot-scope="scope">
                <el-button @click="editPermiss(scope.row)" type="text">编辑</el-button>
                <el-button @click="removePermiss(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-scrollbar>
      <!-- 弹框 -->
      <el-dialog
        style="width:56%;margin-left:22%"
        title="扣分项配置"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
        @closed="closeDialog"
      >
        <el-form label-width="95px" :model="dutyFrom" :hide-required-asterisk="false">
          <el-form-item label="类别：" prop="type">
            <el-select class="userIntSize" v-model="dutyFrom.type" clearable>
              <el-option
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="扣分项：" prop="name">
            <el-input class="userIntSize" v-model="dutyFrom.name" clearable placeholder="请输入扣分项"></el-input>
          </el-form-item>
          <el-form-item label="分数：" prop="score">
            <el-input class="userIntSize" v-model="dutyFrom.score" clearable placeholder="请输入扣分项"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="saveBtn" type="primary" @click="submitForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      // 弹框显示隐藏
      dialogFormVisible: false,
      // 表单数据
      dutyFrom: {
        type: "",
        name: "",
        score: "",
        id: "",
      },
      typeList: [
        { id: 1, name: "负面清单" },
        { id: 2, name: "日常工作台账" },
      ],
    };
  },
  mounted() {
    this.getTabData();
  },
  methods: {
    //   获取表格数据
    getTabData() {
      this.$axios
        .post("negativeSource/getAllSource?id=" + 0)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加权限
    addPermiss() {
      this.dialogFormVisible = true;
    },
    // 编辑权限
    editPermiss(row) {
      this.dialogFormVisible = true;
      this.$axios
        .post("negativeSource/getSourceId", { id: row.id }, 2)
        .then((res) => {
          if (res.code == 200) {
            this.dutyFrom = res.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除权限
    removePermiss(row) {
      this.$confirm("确认删除？")
        .then((_) => {
          this.$axios
            .post("negativeSource/DeleteSource", { id: row.id }, 2)
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  message: "删除成功",
                  type: "success",
                });
                this.getTabData();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((_) => {});
    },
    // 新增权限
    addPerFun(data) {
      this.$axios
        .post("negativeSource/addSource", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 修改权限
    updataPer(data) {
      this.$axios
        .post("negativeSource/updateSource", data)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.getTabData();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 保存
    submitForm() {
      if (
        this.dutyFrom.name == "" ||
        this.dutyFrom.score == "" ||
        this.dutyFrom.type == ""
      ) {
        this.$message.error("请编辑完所有输入框");
        return;
      }

      let obj = {
        name: this.dutyFrom.name,
        score: this.dutyFrom.score,
        type: this.dutyFrom.type,
      };
      if (this.dutyFrom.id) {
        obj.id = this.dutyFrom.id;
        this.updataPer(obj);
      } else {
        this.addPerFun(obj);
      }
      this.dialogFormVisible = false;
    },
    // 关闭弹框
    closeDialog() {
      this.dutyFrom = {
        username: "",
        mobile: "",
        userId: "",
      };
    },
  },
};
</script>
<style scoped>
.userIntSize {
  width: 80%;
}
.saveBtn {
  width: 55%;
  margin-left: 12%;
}
</style>
<style>
.perTabSty .el-table__row:hover > td {
  background: #e9eeff !important;
}
</style>
